<script setup>
import { reactive, ref, onMounted } from 'vue';
import { pageelder,deleteById,findCount } from "@/api/outEnter";
import { findById } from "@/api/elderInfo";
import { useAdminStore } from '@/stores/admin'
import { useRouter } from "vue-router";
import dayjs from 'dayjs'
const store = useAdminStore()

const state = reactive({
    name: store.admin.realName,
    username: store.admin.username, // 用户名
    imagePath:store.admin.avatar,
    hasBack: false, // 是否展示返回icon
})

const formatTime = (row, column, cellValue) => {
  return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss')
}

const router = useRouter();
const queryPageParam = reactive({
  name: '',
  pageNo: 1,
  pageSize: 5
});
const countInfo=reactive({
  orderApplying:0,
  orderApproval:0,
  orderGoOut:0,
  orderBackMonth:0,


})

// 数据
const tableData = ref([]);
const total = ref(0);
// 在数据部分添加职位映射
const elderMap = ref({});

// 修改getElderName方法
const getElderName = async (elderlyId) => {
  if (!elderlyId) return '无名字';
  
  // 如果已经缓存过，直接返回
  if (elderMap.value[elderlyId]) {
    return elderMap.value[elderlyId];
  }
  
  try {  
    const res = await findById(elderlyId);
    if (res.data && res.data.name) {
      elderMap.value[elderlyId] = res.data.name;
      return res.data.name;
    }
    return '未知姓名';
  } catch (error) {
    console.error('获取老人信息失败:', error);
    return '未知姓名';
  }
};
const handleQueryPage = async () => {
  try {

    const res = await pageelder(queryPageParam);
    tableData.value = res.data.records;
    total.value = res.data.total;
    
    
    // 预加载所有老人姓名
    await Promise.all(
      tableData.value.map(async (item) => {
        if (item.elderlyId) { // 确保使用正确的字段名
          await getElderName(item.elderlyId);
        }
      })
    );
    const countInfoRes = await findCount();
    countInfo.orderApplying=countInfoRes.data.orderApplying
    countInfo.orderApproval=countInfoRes.data.orderApproval
    countInfo.orderGoOut=countInfoRes.data.orderGoOut
    countInfo.orderBackMonth=countInfoRes.data.orderBackMonth
  } catch (error) {
    console.error('查询数据失败:', error);
  }
};
const genderMap = reactive({
  1: '男',
  0: '女'
});
// 修改每页数量的回调函数
const handleSizeChange = (sizeValue) => {
  queryPageParam.pageSize = sizeValue;
  handleQueryPage();
};

// 修改页码之后的回调函数
const handleCurrentChange = (currentValue) => {
  queryPageParam.pageNo = currentValue;
  handleQueryPage();
};

// 查看
const handleDetail = (id) => {
  router.push({
    path: '/outEnter/detail',
    query: { id }
  });
};

// 编辑
const handleEdit = (id) => {
  router.push({
    path: '/outEnter/save',
    query: { id }
  });
};

// 确认删除
const handleDeleteConfirm = (id) => {
  deleteById(id).then(() => {
    handleQueryPage(); // 删除成功后再次分页查询
  });
};

// 新增
const handleAdd = () => {
  router.push({
    path: '/outEnter/save'
  });
};

// Vue 挂载完成之后执行钩子函数
onMounted(() => {
  handleQueryPage();
  
  
});
// 定义状态枚举
const STATUS = {
  PENDING: { value: 0, label: '申请中', type: 'info' },
  APPROVED: { value: 1, label: '已批准', type: 'success' },
  REJECTED: { value: 2, label: '已拒绝', type: 'danger' },
  OUTING: { value: 3, label: '外出中', type: 'warning' },
  RETURNED: { value: 4, label: '已返回', type: '' }
}

// 获取状态信息的方法
const getStatusInfo = (statusValue) => {
  return Object.values(STATUS).find(item => item.value === statusValue) || { label: '未知状态', type: '' }
}

</script>

<template>
<div id="app">
    <div class="app-container">
      <!-- 顶部标题和用户信息 -->
      <div class="header">
        <div class="app-title">
          <div class="app-icon">
            <i class="fas fa-people-carry"></i>
          </div>
          <div class="title-content">
            <h1>养老院外出登记管理系统</h1>
            <p>老人外出申请、审批与登记管理平台</p>
          </div>
        </div>
        <div class="user-info">
          <div class="user-avatar">{{ state.username }}</div>
          <div class="user-details">
            <div class="user-name">{{ state.username }} · 管理员</div>
            <div class="user-role">金色年华养老院</div>
          </div>
          <div class="notifications">
            <i class="fas fa-bell"></i>
          </div>
        </div>
      </div>
      
      <!-- 统计卡片 -->
      <div class="stats-container">
        <div class="stat-card">
          <div class="stat-header">
            <div>
              <p>申请中</p>
              <div class="stat-content">
                <h3>{{ countInfo.orderApplying }}</h3>
                <p>待审批外出申请</p>
              </div>
            </div>
            <div class="stat-icon pending">
              <i class="fas fa-hourglass-half"></i>
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress pending"></div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <div>
              <p>已批准</p>
              <div class="stat-content">
                <h3>{{ countInfo.orderApproval }}</h3>
                <p>已批准外出申请</p>
              </div>
            </div>
            <div class="stat-icon approved">
              <i class="fas fa-check-circle"></i>
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress approved"></div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <div>
              <p>外出中</p>
              <div class="stat-content">
                <h3>{{ countInfo.orderGoOut }}</h3>
                <p>当前外出中的老人</p>
              </div>
            </div>
            <div class="stat-icon outing">
              <i class="fas fa-walking"></i>
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress outing"></div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-header">
            <div>
              <p>已返回</p>
              <div class="stat-content">
                <h3>{{ countInfo.orderBackMonth }}</h3>
                <p>本月已返回老人</p>
              </div>
            </div>
            <div class="stat-icon returned">
              <i class="fas fa-home"></i>
            </div>
          </div>
          <div class="progress-bar">
            <div class="progress returned"></div>
          </div>
        </div>
      </div>
      
      <!-- 过滤和操作区域 -->
      <div class="action-container">
        <div class="filter-group">
          <label>老人姓名</label>
          <el-input 
            v-model="queryPageParam.name" 
            placeholder="请输入老人姓名" 
            clearable
            class="filter-input"
            style="width: 200px;"
          >
            <template #prefix>
              <i class="fas fa-user"></i>
            </template>
          </el-input>
        </div>
        <div class="action-buttons">
          <el-button type="primary" @click="handleQueryPage">
            <i class="fas fa-search"></i> 查询记录
          </el-button>
          <el-button type="success" @click="handleAdd">
            <i class="fas fa-plus"></i> 新增登记
          </el-button>
        </div>
      </div>
      
      <!-- 图表区域 -->
      <!-- <div class="chart-container">
        <div class="chart-card">
          <div class="chart-title">
            <i class="fas fa-chart-line"></i>
            <span>近30天外出情况统计</span>
          </div>
          <div class="chart-placeholder">
            <div class="chart-message">
              <i class="fas fa-chart-bar"></i>
              <p>外出情况统计图表区域</p>
            </div>
          </div>
        </div>
        
        <div class="chart-card">
          <div class="chart-title">
            <i class="fas fa-chart-pie"></i>
            <span>外出状态分布</span>
          </div>
          <div class="chart-placeholder">
            <div class="chart-message">
              <i class="fas fa-chart-pie"></i>
              <p>外出状态分布图表区域</p>
            </div>
          </div>
        </div>
      </div> -->
      
      <!-- 表格区域 -->
      <div class="table-container">
        <div class="table-header">
          <div class="section-title">
            <i class="fas fa-list"></i>
            <span>外出登记记录</span>
          </div>
          <div class="table-actions">
            <el-button size="small" plain>
              <i class="fas fa-columns"></i> 列设置
            </el-button>
          </div>
        </div>
        
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column prop="recordId" label="外出编号" width="110" align="center"></el-table-column>
          <el-table-column prop="elderlyId" label="老人ID" width="100" align="center"></el-table-column>
          
          <el-table-column prop="status" label="状态" width="140" align="center">
  <template #default="scope">
    <el-tag :type="getStatusInfo(scope.row.status).type">
      {{ getStatusInfo(scope.row.status).label }}
    </el-tag>
    </template>
          </el-table-column>
          
          <el-table-column prop="elderInfo.name" label="老人姓名" width="140" align="center">
            <template #default="scope">
              <div class="elder-name">
                <i class="fas fa-user"></i>
                {{ elderMap[scope.row.elderlyId] || '加载中...' }}
              </div>
            </template>
          </el-table-column>
          
          <el-table-column prop="applyTime" label="申请时间" width="180" :formatter="formatTime" />

          
          <el-table-column prop="outTime" label="外出时间" width="180" :formatter="formatTime" />
      <el-table-column prop="inTime" label="预计回归时间" width="180" :formatter="formatTime" />
          
          <el-table-column prop="reason" label="外出事由" width="200"></el-table-column>
          
          <el-table-column label="操作" fixed="right" width="240" align="center">
            <template #default="scope">
              <div class="action-cell">
                <el-button size="small" class="action-btn" @click="handleDetail(scope.row.recordId)">
                  <i class="fas fa-eye"></i> 查看
                </el-button>
                <el-button type="primary" size="small" class="action-btn" @click="handleEdit(scope.row.recordId)">
                  <i class="fas fa-edit"></i> 编辑
                </el-button>
                <el-popconfirm 
                  title="确定要删除此外出记录吗？" 
                  confirm-button-text="删除"
                  cancel-button-text="取消"
                  @confirm="handleDeleteConfirm(scope.row.recordId)"
                >
                  <template #reference>
                    <el-button type="danger" size="small" class="action-btn">
                      <i class="fas fa-trash"></i> 删除
                    </el-button>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        
        <div class="pagination-container">
          <el-pagination 
            v-model:current-page="queryPageParam.pageNo" 
            v-model:page-size="queryPageParam.pageSize"
            :page-sizes="[5, 10, 20, 30]" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="total"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped>
   * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    .app {
      background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
      min-height: 100vh;
      padding: 20px;
      color: #2c3e50;
    }
    
    .app-container {
      max-width: 1600px;
      margin: 0 auto;
    }
    
    /* 顶部导航和标题 */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding: 0 15px;
    }
    
    .app-title {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .filter-input{
      display: flex;
      width: 300px;
    }
    .app-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
    }
    
    .app-icon i {
      font-size: 28px;
      color: white;
    }
    
    .title-content h1 {
      font-size: 28px;
      font-weight: 700;
      color: #2c3e50;
      letter-spacing: 0.5px;
    }
    
    .title-content p {
      font-size: 15px;
      color: #7f8c8d;
      margin-top: 5px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 15px;
      background: white;
      padding: 10px 20px;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }
    
    .user-avatar {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3498db 0%, #8e44ad 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 18px;
    }
    
    /* 统计卡片 */
    .stats-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .stat-card {
      background: white;
      border-radius: 18px;
      padding: 25px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      display: flex;
      flex-direction: column;
    }
    
    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    }
    
    .stat-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }
    
    .stat-icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
    }
    
    .stat-icon.pending { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); color: #d63031; }
    .stat-icon.approved { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); color: #0984e3; }
    .stat-icon.outing { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); color: #e17055; }
    .stat-icon.returned { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #00b894; }
    
    .stat-content h3 {
      font-size: 32px;
      font-weight: 700;
      margin: 10px 0 5px;
    }
    
    .stat-content p {
      color: #7f8c8d;
      font-size: 15px;
    }
    
    .progress-bar {
      height: 8px;
      background: #ecf0f1;
      border-radius: 4px;
      margin-top: 15px;
      overflow: hidden;
    }
    
    .progress {
      height: 100%;
      border-radius: 4px;
    }
    
    .progress.pending { background: linear-gradient(90deg, #ff9a9e, #fad0c4); width: 30%; }
    .progress.approved { background: linear-gradient(90deg, #a1c4fd, #c2e9fb); width: 65%; }
    .progress.outing { background: linear-gradient(90deg, #ffecd2, #fcb69f); width: 15%; }
    .progress.returned { background: linear-gradient(90deg, #84fab0, #8fd3f4); width: 80%; }
    
   /* 过滤和操作区域 */
.action-container {
  background: white;
  border-radius: 18px;
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-wrap: nowrap; /* 禁止换行，确保一行显示 */
  align-items: center;
  gap: 15px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto; /* 禁止过滤组伸缩 */
  margin: 0;
}

.filter-group label {
  font-weight: 500;
  color: #34495e;
  min-width: 80px; /* 统一标签宽度 */
  font-size: 14px;
  white-space: nowrap; /* 防止标签文本换行 */
}
    
    .date-range {
      display: flex;
      align-items: center;
      gap: 8px; /* 减小间距 */
    }
    
    .el-input {
      border-radius: 12px;
      overflow: hidden;
    }
    
    .el-input__inner {
      border-radius: 12px !important;
      padding: 0 12px !important;
      height: 38px !important; /* 减小高度 */
    }
    
    /* 减小输入框宽度 */
    .name-input, .status-select {
      width: 90px ; /* 设置固定宽度 */
    }
    
    .date-input {
      width: 160px ; /* 设置固定宽度 */
    }
    
    .action-buttons {
      display: flex;
      gap: 12px; /* 减小间距 */
      margin-left: 10px;
    }
    
    .el-button {
      border-radius: 12px !important;
      padding: 10px 18px !important; /* 减小按钮内边距 */
      font-weight: 500 !important;
      display: flex;
      align-items: center;
      gap: 6px; /* 减小图标间距 */
      font-size: 14px; /* 减小字体大小 */
    }
    
    /* 表格区域 */
    .table-container {
      background: white;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      padding: 25px;
      margin-bottom: 30px;
    }
    
    .table-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    
    .section-title {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .section-title i {
      color: #3498db;
    }
    
    .el-table {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #eef2f7;
    }
    
    .el-table th {
      background-color: #f8fafd !important;
      font-weight: 600 !important;
      color: #2c3e50 !important;
    }
    
    .el-table__row:hover td {
      background-color: #f5f9ff !important;
    }
    
    .action-cell {
      display: flex;
      gap: 10px; /* 减小间距 */
    }
    
    .action-btn {
      padding: 7px 14px !important; /* 减小按钮内边距 */
      border-radius: 10px !important;
      font-size: 13px !important;
      display: flex;
      align-items: center;
      gap: 4px; /* 减小图标间距 */
    }
    
    /* 状态标签 */
    .status-tag {
      padding: 5px 12px; /* 减小内边距 */
      border-radius: 20px;
      font-size: 12px; /* 减小字体大小 */
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px; /* 减小图标间距 */
    }
    
    .status-pending { background: #fff0f0; color: #ff6b6b; }
    .status-approved { background: #e8f4ff; color: #3498db; }
    .status-outing { background: #fff8e6; color: #f39c12; }
    .status-returned { background: #e8f7f0; color: #27ae60; }
    .status-rejected { background: #f9f0ff; color: #8e44ad; }
    
    /* 分页 */
    .pagination-container {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
    
    /* 图表区域 */
    .chart-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
      gap: 20px;
      margin-bottom: 30px;
    }
    
    .chart-card {
      background: white;
      border-radius: 18px;
      padding: 25px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
    }
    
    .chart-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .chart-placeholder {
      height: 300px;
      background: #f9fbfd;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #95a5a6;
      font-size: 16px;
    }
    
    .chart-placeholder i {
      font-size: 48px;
      margin-bottom: 15px;
      opacity: 0.3;
    }
    
    /* 响应式调整 */
    @media (max-width: 1200px) {
      .chart-container {
        grid-template-columns: 1fr;
      }
    }
    
    @media (max-width: 992px) {
      .filter-group {
        min-width: 100%;
      }
      
      .name-input, .status-select, .date-input {
        width: 100% !important;
      }
    }
    
    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
      }
      
      .user-info {
        width: 100%;
        justify-content: space-between;
      }
      
      .action-container {
        flex-direction: column;
        align-items: stretch;
      }
      
      .action-buttons {
        margin-left: 0;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
      }
      
      .action-buttons .el-button {
        flex: 1;
        min-width: 120px;
      }
      
      .filter-group {
        min-width: 100%;
      }
      
      .date-range {
        flex-wrap: wrap;
      }
      
      .date-range .el-date-editor {
        flex: 1;
        min-width: 140px;
      }
    }
  </style>